CSS גיליונות סגנון מדורגים

CSS גיליונות סגנון מדורגים

מבוא

כידוע, שפת HTML מגדירה את תוכן ומבנה הדפים באינטרנט, אך היא אינה מגדירה את העיצוב הויזואלי שלהם. גיליונות סגנון מדורגים (באנגלית: Cascading Style Sheets ובראשי תיבות: CSS) הם פורמט לעיצוב דפי אינטרנט. הגיליונות קובעים את עיצובם של תגים ב-HTML,‏ XHTML וכל שפה דומה ל-XML לבניית אתרי אינטרנט. CSS נוצר במטרה להפריד בין תוכן ומבנה דפי האינטרנט לבין עיצובם: עד ליצירת ה-CSS בידי קבוצת התקינה W3C ב-1995, נכתבו תוכן האתרים וסגנון העיצוב שלהם באותו דף HTML. כתוצאה מכך, הפך קוד ה-HTML למסובך ובלתי קריא, ושינויים עיצוביים באתר שלם דרשו מעבר דף אחר דף. באמצעות CSS ניתן למקם הגדרות עיצוב בקובץ יחיד, ששינוי בו ישתקף בבת אחת בכל הדפים העושים בו שימוש.

יתרונות

הפרדה זו יוצרת מספר יתרונות:

  • עיצוב גלובלי: בראש ובראשונה יצירת תבנית גלובלית לכל דפי האתר. שינוי קובץ ה-CSS ישתקף בכל דפי האתר, ולא יצריך התערבות פרטנית בכל דף ודף.
  • קוד נקי יותר: הורדת המורכבות והסיבוכיות ביצירת דפי HTML, באמצעות הוצאת הוראות העיצוב מתוכם.
  • הפרדת רשויות: הפרדה נוחה בין אנשי המקצוע השונים שעובדים ביצירת האתר. העיצוב והגרפיקה נעשים על ידי אנשי העיצוב בקבצים נפרדים, והתכנים נכתבים על ידי אנשי התוכן בקוד נקי מהגדרות עיצוב.
  • התאמה אישית: ההפרדה בין העיצוב לתכנים מאפשרת הצגה מותאמת למשתמש, כפי שהדבר נעשה למשל ב וויקיפדיה, שבה כל משתמש יכול לבחור באיזה עיצוב, מתוך עיצובים אחדים המוצעים לו, ברצונו לצפות באתר.
  • התאמה לפלטפורמות שונות: שימוש ב-CSS מאפשר יצירת גרסאות להדפסה, גרסאות להצגה על מדיומים אחרים (כמו מחשבי כף יד, טלפונים סלולריים טלוויזיה וכדומה). CSS תומכת גם ביכולות קוליות ובכתב ברייל.

גרסאות

  • CSS1 הוכרז בדצמבר 1996, במסגרתו הוגדר שימוש רשמי לתמיכה בעיצוב אלמנטים דוגמת: גופנים ומניפולציות בגופנים, צבעי טקסט ואלמנטים שונים, הגדרות טקסט כגון גובה ומרווחי שורה, יישור תכנים, ריפודים, מרווחים, מסגרות ועוד. תקן זה אינו נתמך עוד.
  • CSS2 הוכרז במאי 1998, ושופר בהמשך על ידי CSS2.1. גרסה זו כוללת יכולות חדשות דוגמת מיקומי אובייקטים, סוגי מדיה ואלמנטים של גובה.
  • CSS3 הוכרז לראשונה ביוני 1999 וטרם הוכרז כתקן רשמי (נכון ל-2011). נכון למרץ 2011, ישנם קרוב ל-40 תקנים מאושרים. תקן זה צפוי לכלול אלמנטים גרפיים רבים כגון שינויי צבע וכיוון דינאמיים, צללים, שקיפות, פינות מעוגלות ועוד.

האלמנטים הניתנים לשינוי באמצעות CSS

באמצעות ה-CSS אפשר לשנות את מראה האלמנטים שבדף ה-HTML. הנה כמה מהאופציות הקיימות:

  • רקע: צבע רקע ותמונת רקע של הדף.
  • טקסט: צורת הגופן, עוביו, גובהו, ריווח בין אותיות.
  • קישורים: כיצד יראה קישור, מה יהיה צבעו והגופן שלו, בעת הצגתו, בעת מעבר עכבר עליו, וכשהוא פעיל.
  • טבלה: מאפיינים חזותיים כגון רקע, עובי וצורת המסגרות השונות בטבלה, הריווח שמסביב לטבלה והריווח שבין הטקסט פנימי לתאים בטבלה.
  • כותרת: צורת שורת הכותרות, סוג גופן וגודל גופן של כותרת. כן אפשר לשלוט אף על עיצובה של האות או השורה הראשונה בפסקה.
  • רשימות: קביעת התמונה הראשית שמופיעה מעל רשימות פריטים, צורת וצבע התבליטים ליד כל פריט.
  • סמן העכבר: שליטה על מראה הסמן במצב רגיל ובמצבים מיוחדים.
  • מיקום: קביעת המקום בו יופיע אלמנט מסוים על הדף, וכן רוחב המסגרת, והשוליים של כל אלמנט.

הגדרת העיצוב איננה סטטית בלבד, אלא יכולה להשתנות על-פי אירועים שמתרחשים בדף, כמו לחיצה על קישור, או מעבר עכבר מעל אזור מסוים. אפשר גם לשלוט על אלמנט שנמצא בתוך אלמנט אחר, כמו קישור שמצוי בטבלה או רשימה שמצויה בפסקה ראשונה.

המאמר נלקח מויקפדיה


מאמרים קשורים

תגובות למאמר

SMWebsites בניית אתרים לעסקים התחילה את דרכה בשנת 2009 , מאז אנו בונים אתרי אינטרנט מרהיבים ואיכותיים עבור עסקים בכל הארץ .